
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Transitions - vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono' rel='stylesheet' type='text/css'>
        <link href='//fonts.googleapis.com/css?family=Dosis:300,500&text=Vue.js' rel='stylesheet' type='text/css'>
        <link href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = "guide"
        </script>
        <link rel="stylesheet" href="/css/page.css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li>
  <form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link current">Guide</a></li>
<li><a href="/api/" class="nav-link">API</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li class="nav-dropdown-container">
  <a class="nav-link">Community</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li>
    <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
    <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
    <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
  </ul>
</li>


    </ul>
</div>

            <div id="main">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li>
  <form id="search-form">
    <input type="text" id="search-query-sidebar" class="search-query st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link current">Guide</a></li>
<li><a href="/api/" class="nav-link">API</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li class="nav-dropdown-container">
  <a class="nav-link">Community</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li>
    <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
    <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
    <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
  </ul>
</li>


    </ul>
    <div class="list">
        <div id="donate" style="margin-bottom: 20px">
            <span class="wrapper" style="width: 110px">
              <img src="/images/patreon.png">
              <a href="/support-vuejs">Support Vue.js</a>
            </span>
        </div>
        <h2>
            Guide
            <select class="version-select">
                <option value="">2.0</option>
                <option selected value="SELF">1.0</option>
                <option value="012">0.12</option>
                <option value="011">0.11</option>
            </select>
        </h2>
        <ul class="menu-root">
            
                <li>
                    <a href="/guide/installation.html" class="sidebar-link">Installation</a>
                </li>
            
                <li>
                    <a href="/guide/index.html" class="sidebar-link">Getting Started</a>
                </li>
            
                <li>
                    <a href="/guide/overview.html" class="sidebar-link">Overview</a>
                </li>
            
                <li>
                    <a href="/guide/instance.html" class="sidebar-link">The Vue Instance</a>
                </li>
            
                <li>
                    <a href="/guide/syntax.html" class="sidebar-link">Data Binding Syntax</a>
                </li>
            
                <li>
                    <a href="/guide/computed.html" class="sidebar-link">Computed Properties</a>
                </li>
            
                <li>
                    <a href="/guide/class-and-style.html" class="sidebar-link">Class and Style Bindings</a>
                </li>
            
                <li>
                    <a href="/guide/conditional.html" class="sidebar-link">Conditional Rendering</a>
                </li>
            
                <li>
                    <a href="/guide/list.html" class="sidebar-link">List Rendering</a>
                </li>
            
                <li>
                    <a href="/guide/events.html" class="sidebar-link">Methods and Event Handling</a>
                </li>
            
                <li>
                    <a href="/guide/forms.html" class="sidebar-link">Form Input Bindings</a>
                </li>
            
                <li>
                    <a href="/guide/transitions.html" class="sidebar-link current">Transitions</a>
                </li>
            
                <li>
                    <a href="/guide/components.html" class="sidebar-link">Components</a>
                </li>
            
                <li>
                    <a href="/guide/reactivity.html" class="sidebar-link">Reactivity in Depth</a>
                </li>
            
                <li>
                    <a href="/guide/custom-directive.html" class="sidebar-link">Custom Directives</a>
                </li>
            
                <li>
                    <a href="/guide/custom-filter.html" class="sidebar-link">Custom Filters</a>
                </li>
            
                <li>
                    <a href="/guide/mixins.html" class="sidebar-link">Mixins</a>
                </li>
            
                <li>
                    <a href="/guide/plugins.html" class="sidebar-link">Plugins</a>
                </li>
            
                <li>
                    <a href="/guide/application.html" class="sidebar-link">Building Large-Scale Apps</a>
                </li>
            
                <li>
                    <a href="/guide/comparison.html" class="sidebar-link">Comparison with Other Frameworks</a>
                </li>
            
                <li>
                    <a href="/guide/join.html" class="sidebar-link">Join the Vue Community!</a>
                </li>
            
        </ul>
    </div>
</div>


<div class="content guide with-sidebar">
    <div id="ad">
  <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
</div>

    <h1>Transitions</h1>
    <p>With Vue.js’ transition system you can apply automatic transition effects when elements are inserted into or removed from the DOM. Vue.js will automatically add/remove CSS classes at appropriate times to trigger CSS transitions or animations for you, and you can also provide JavaScript hook functions to perform custom DOM manipulations during the transition.</p>
<p>To apply transition effects, you need to use the special <code>transition</code> attribute on the target element:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"show"</span> <span class="attr">transition</span>=<span class="string">"my-transition"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>The <code>transition</code> attribute can be used together with:</p>
<ul>
<li><code>v-if</code></li>
<li><code>v-show</code></li>
<li><code>v-for</code> (triggered for insertion and removal only, for animating changes of order<br><a href="https://github.com/vuejs/vue-animated-list" target="_blank" rel="external">use vue-animated-list plugin</a>)</li>
<li>Dynamic components (introduced in the <a href="components.html#Dynamic-Components">next section</a>)</li>
<li>On a component root node, and triggered via Vue instance DOM methods, e.g. <code>vm.$appendTo(el)</code>.</li>
</ul>
<p>When an element with transition is inserted or removed, Vue will:</p>
<ol>
<li><p>Try to find a JavaScript transition hooks object registered either through <code>Vue.transition(id, hooks)</code> or passed in with the <code>transitions</code> option, using the id <code>&quot;my-transition&quot;</code>. If it finds it, it will call the appropriate hooks at different stages of the transition.</p>
</li>
<li><p>Automatically sniff whether the target element has CSS transitions or CSS animations applied, and add/remove the CSS classes at the appropriate times.</p>
</li>
<li><p>If no JavaScript hooks are provided and no CSS transitions/animations are detected, the DOM operation (insertion/removal) is executed immediately on next frame.</p>
</li>
</ol>
<h2 id="CSS-Transitions"><a href="#CSS-Transitions" class="headerlink" title="CSS Transitions"></a>CSS Transitions</h2><h3 id="Example"><a href="#Example" class="headerlink" title="Example"></a>Example</h3><p>A typical CSS transition looks like this:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"show"</span> <span class="attr">transition</span>=<span class="string">"expand"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>You also need to define CSS rules for <code>.expand-transition</code>, <code>.expand-enter</code> and <code>.expand-leave</code> classes:</p>
<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="comment">/* always present */</span></div><div class="line"><span class="selector-class">.expand-transition</span> &#123;</div><div class="line">  <span class="attribute">transition</span>: all .<span class="number">3s</span> ease;</div><div class="line">  <span class="attribute">height</span>: <span class="number">30px</span>;</div><div class="line">  <span class="attribute">padding</span>: <span class="number">10px</span>;</div><div class="line">  <span class="attribute">background-color</span>: <span class="number">#eee</span>;</div><div class="line">  <span class="attribute">overflow</span>: hidden;</div><div class="line">&#125;</div><div class="line"></div><div class="line"><span class="comment">/* .expand-enter defines the starting state for entering */</span></div><div class="line"><span class="comment">/* .expand-leave defines the ending state for leaving */</span></div><div class="line"><span class="selector-class">.expand-enter</span>, <span class="selector-class">.expand-leave</span> &#123;</div><div class="line">  <span class="attribute">height</span>: <span class="number">0</span>;</div><div class="line">  <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">10px</span>;</div><div class="line">  <span class="attribute">opacity</span>: <span class="number">0</span>;</div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>You can achieve different transitions on the same element by using dynamic binding:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-if</span>=<span class="string">"show"</span> <span class="attr">:transition</span>=<span class="string">"transitionName"</span>&gt;</span>hello<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="keyword">new</span> Vue(&#123;</div><div class="line">  el: <span class="string">'...'</span>,</div><div class="line">  data: &#123;</div><div class="line">    show: <span class="literal">false</span>,</div><div class="line">    transitionName: <span class="string">'fade'</span></div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>In addition, you can provide JavaScript hooks:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.transition(<span class="string">'expand'</span>, &#123;</div><div class="line"></div><div class="line">  beforeEnter: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    el.textContent = <span class="string">'beforeEnter'</span></div><div class="line">  &#125;,</div><div class="line">  enter: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    el.textContent = <span class="string">'enter'</span></div><div class="line">  &#125;,</div><div class="line">  afterEnter: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    el.textContent = <span class="string">'afterEnter'</span></div><div class="line">  &#125;,</div><div class="line">  enterCancelled: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    <span class="comment">// handle cancellation</span></div><div class="line">  &#125;,</div><div class="line"></div><div class="line">  beforeLeave: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    el.textContent = <span class="string">'beforeLeave'</span></div><div class="line">  &#125;,</div><div class="line">  leave: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    el.textContent = <span class="string">'leave'</span></div><div class="line">  &#125;,</div><div class="line">  afterLeave: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    el.textContent = <span class="string">'afterLeave'</span></div><div class="line">  &#125;,</div><div class="line">  leaveCancelled: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    <span class="comment">// handle cancellation</span></div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>

<div id="demo">
  <div v-if="show" transition="expand">hello</div>
  <button @click="show = !show">Toggle</button>
</div>

<style>
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
</style>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true,
    transitionState: 'Idle'
  },
  transitions: {
    expand: {
      beforeEnter: function (el) {
        el.textContent = 'beforeEnter'
      },
      enter: function (el) {
        el.textContent = 'enter'
      },
      afterEnter: function (el) {
        el.textContent = 'afterEnter'
      },
      beforeLeave: function (el) {
        el.textContent = 'beforeLeave'
      },
      leave: function (el) {
        el.textContent = 'leave'
      },
      afterLeave: function (el) {
        el.textContent = 'afterLeave'
      }
    }
  }
})
</script>

<h3 id="Transition-CSS-Classes"><a href="#Transition-CSS-Classes" class="headerlink" title="Transition CSS Classes"></a>Transition CSS Classes</h3><p>The classes being added and toggled are based on the value of the <code>transition</code> attribute. In the case of <code>transition=&quot;fade&quot;</code>, three CSS classes are involved:</p>
<ol>
<li><p>The class <code>.fade-transition</code> will be always present on the element.</p>
</li>
<li><p><code>.fade-enter</code> defines the starting state of an entering transition. It is applied for a single frame and then immediately removed.</p>
</li>
<li><p><code>.fade-leave</code> defines the ending state of a leaving transition. It is applied when the leaving transition starts and removed when the transition finishes.</p>
</li>
</ol>
<p>If the <code>transition</code> attribute has no value, the classes will default to <code>.v-transition</code>, <code>.v-enter</code> and <code>.v-leave</code>.</p>
<h3 id="Custom-Transition-Classes"><a href="#Custom-Transition-Classes" class="headerlink" title="Custom Transition Classes"></a>Custom Transition Classes</h3><blockquote>
<p>New in 1.0.14</p>
</blockquote>
<p>You can specify custom <code>enterClass</code> and <code>leaveClass</code> in the transition definition. These will override the conventional class names. Useful when you want to combine Vue’s transition system with an existing CSS animation library, e.g. <a href="https://daneden.github.io/animate.css/" target="_blank" rel="external">Animate.css</a>:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">"ok"</span> <span class="attr">class</span>=<span class="string">"animated"</span> <span class="attr">transition</span>=<span class="string">"bounce"</span>&gt;</span>Watch me bounce<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.transition(<span class="string">'bounce'</span>, &#123;</div><div class="line">  enterClass: <span class="string">'bounceInLeft'</span>,</div><div class="line">  leaveClass: <span class="string">'bounceOutRight'</span></div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<h3 id="Declaring-Transition-Type"><a href="#Declaring-Transition-Type" class="headerlink" title="Declaring Transition Type"></a>Declaring Transition Type</h3><blockquote>
<p>New in 1.0.14</p>
</blockquote>
<p>Vue.js needs to attach event listeners in order to know when the transition has ended. It can either be <code>transitionend</code> or <code>animationend</code>, depending on the type of CSS rules applied. If you are only using one or the other, Vue.js can automatically detect the correct type. However, if in some cases you want to have both on the same element, for example having a CSS animation triggered by Vue, and also having a CSS transition effect on hover, you will have to explicitly declare the type you want Vue to care about:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.transition(<span class="string">'bounce'</span>, &#123;</div><div class="line">  <span class="comment">// Vue will now only care about `animationend` events</span></div><div class="line">  <span class="comment">// for this transition</span></div><div class="line">  type: <span class="string">'animation'</span></div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<h3 id="Transition-Flow-Details"><a href="#Transition-Flow-Details" class="headerlink" title="Transition Flow Details"></a>Transition Flow Details</h3><p>When the <code>show</code> property changes, Vue.js will insert or remove the <code>&lt;div&gt;</code> element accordingly, and apply transition classes as specified below:</p>
<ul>
<li><p>When <code>show</code> becomes false, Vue.js will:</p>
<ol>
<li>Call <code>beforeLeave</code> hook;</li>
<li>Apply <code>v-leave</code> class to the element to trigger the transition;</li>
<li>Call <code>leave</code> hook;</li>
<li>Wait for the transition to finish; (listening to a <code>transitionend</code> event)</li>
<li>Remove the element from the DOM and remove <code>v-leave</code> class;</li>
<li>Call <code>afterLeave</code> hook.</li>
</ol>
</li>
<li><p>When <code>show</code> becomes true, Vue.js will:</p>
<ol>
<li>Call <code>beforeEnter</code> hook;</li>
<li>Apply <code>v-enter</code> class to the element;</li>
<li>Insert it into the DOM;</li>
<li>Call <code>enter</code> hook;</li>
<li>Force a CSS layout so <code>v-enter</code> is actually applied, then remove the <code>v-enter</code> class to trigger a transition back to the element’s original state;</li>
<li>Wait for the transition to finish;</li>
<li>Call <code>afterEnter</code> hook.</li>
</ol>
</li>
</ul>
<p>In addition, if you remove an element when its enter transition is in progress, the <code>enterCancelled</code> hook will be called to give you the opportunity to clean up changes or timers created in <code>enter</code>. Vice-versa for leaving transitions.</p>
<p>All of the above hook functions are called with their <code>this</code> contexts set to the associated Vue instances. It follows the same rule of compilation scopes: a transition’s <code>this</code> context will point to the scope it is compiled in.</p>
<p>Finally, the <code>enter</code> and <code>leave</code> can optionally take a second callback argument. When you do so, you are indicating that you want to explicitly control when the transition should end, so instead of waiting for the CSS <code>transitionend</code> event, Vue.js will expect you to eventually call the callback to finish the transition. For example:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">enter: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">  <span class="comment">// no second argument, transition end</span></div><div class="line">  <span class="comment">// determined by CSS transitionend event</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p>vs.</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">enter: <span class="function"><span class="keyword">function</span> (<span class="params">el, done</span>) </span>&#123;</div><div class="line">  <span class="comment">// with the second argument, the transition</span></div><div class="line">  <span class="comment">// will only end when `done` is called.</span></div><div class="line">&#125;</div></pre></td></tr></table></figure>
<p class="tip">When multiple elements are being transitioned together, Vue.js batches them and only applies one forced layout.</p>

<h3 id="CSS-Animations"><a href="#CSS-Animations" class="headerlink" title="CSS Animations"></a>CSS Animations</h3><p>CSS animations are applied in the same way with CSS transitions, the difference being that <code>v-enter</code> is not removed immediately after the element is inserted, but on an <code>animationend</code> event.</p>
<p>Example: (omitting prefixed CSS rules here)</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">v-show</span>=<span class="string">"show"</span> <span class="attr">transition</span>=<span class="string">"bounce"</span>&gt;</span>Look at me!<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div></pre></td></tr></table></figure>
<figure class="highlight css"><table><tr><td class="code"><pre><div class="line"><span class="selector-class">.bounce-transition</span> &#123;</div><div class="line">  <span class="attribute">display</span>: inline-block; <span class="comment">/* otherwise scale animation won't work */</span></div><div class="line">&#125;</div><div class="line"><span class="selector-class">.bounce-enter</span> &#123;</div><div class="line">  <span class="attribute">animation</span>: bounce-in .<span class="number">5s</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.bounce-leave</span> &#123;</div><div class="line">  <span class="attribute">animation</span>: bounce-out .<span class="number">5s</span>;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">keyframes</span> bounce-in &#123;</div><div class="line">  0% &#123;</div><div class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(0);</div><div class="line">  &#125;</div><div class="line">  50% &#123;</div><div class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(1.5);</div><div class="line">  &#125;</div><div class="line">  100% &#123;</div><div class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(1);</div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">keyframes</span> bounce-out &#123;</div><div class="line">  0% &#123;</div><div class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(1);</div><div class="line">  &#125;</div><div class="line">  50% &#123;</div><div class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(1.5);</div><div class="line">  &#125;</div><div class="line">  100% &#123;</div><div class="line">    <span class="attribute">transform</span>: <span class="built_in">scale</span>(0);</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></td></tr></table></figure>

<div id="anim" class="demo">
  <span v-show="show" transition="bounce">Look at me!</span>
  <br>
  <button @click="show = !show">Toggle</button>
</div>

<style>
  .bounce-transition {
    display: inline-block;
  }
  .bounce-enter {
    -webkit-animation: bounce-in .5s;
    animation: bounce-in .5s;
  }
  .bounce-leave {
    -webkit-animation: bounce-out .5s;
    animation: bounce-out .5s;
  }
  @keyframes bounce-in {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @keyframes bounce-out {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
    }
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }
  @-webkit-keyframes bounce-in {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @-webkit-keyframes bounce-out {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
    }
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }
</style>

<script>
new Vue({
  el: '#anim',
  data: { show: true }
})
</script>

<h2 id="JavaScript-Transitions"><a href="#JavaScript-Transitions" class="headerlink" title="JavaScript Transitions"></a>JavaScript Transitions</h2><p>You can also use just the JavaScript hooks without defining any CSS rules. When using JavaScript only transitions, <strong>the <code>done</code> callbacks are required for the <code>enter</code> and <code>leave</code> hooks</strong>, otherwise they will be called synchronously and the transition will finish immediately.</p>
<p>It’s also a good idea to explicitly declare <code>css: false</code> for your JavaScript transitions so that Vue.js can skip the CSS detection. This also prevents cascaded CSS rules from accidentally interfering with the transition.</p>
<p>The following example registers a custom JavaScript transition using jQuery:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.transition(<span class="string">'fade'</span>, &#123;</div><div class="line">  css: <span class="literal">false</span>,</div><div class="line">  enter: <span class="function"><span class="keyword">function</span> (<span class="params">el, done</span>) </span>&#123;</div><div class="line">    <span class="comment">// element is already inserted into the DOM</span></div><div class="line">    <span class="comment">// call done when animation finishes.</span></div><div class="line">    $(el)</div><div class="line">      .css(<span class="string">'opacity'</span>, <span class="number">0</span>)</div><div class="line">      .animate(&#123; opacity: <span class="number">1</span> &#125;, <span class="number">1000</span>, done)</div><div class="line">  &#125;,</div><div class="line">  enterCancelled: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    $(el).stop()</div><div class="line">  &#125;,</div><div class="line">  leave: <span class="function"><span class="keyword">function</span> (<span class="params">el, done</span>) </span>&#123;</div><div class="line">    <span class="comment">// same as enter</span></div><div class="line">    $(el).animate(&#123; opacity: <span class="number">0</span> &#125;, <span class="number">1000</span>, done)</div><div class="line">  &#125;,</div><div class="line">  leaveCancelled: <span class="function"><span class="keyword">function</span> (<span class="params">el</span>) </span>&#123;</div><div class="line">    $(el).stop()</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>Then you can use it with the <code>transition</code> attribute, same deal:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">transition</span>=<span class="string">"fade"</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></td></tr></table></figure>
<h2 id="Staggering-Transitions"><a href="#Staggering-Transitions" class="headerlink" title="Staggering Transitions"></a>Staggering Transitions</h2><p>It’s possible to create staggering transitions when using <code>transition</code> with <code>v-for</code>. You can do this either by adding a <code>stagger</code>, <code>enter-stagger</code> or <code>leave-stagger</code> attribute to your transitioned element:</p>
<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">v-for</span>=<span class="string">"item in list"</span> <span class="attr">transition</span>=<span class="string">"stagger"</span> <span class="attr">stagger</span>=<span class="string">"100"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>
<p>Or, you can provide a <code>stagger</code>, <code>enterStagger</code> or <code>leaveStagger</code> hook for finer-grained control:</p>
<figure class="highlight js"><table><tr><td class="code"><pre><div class="line">Vue.transition(<span class="string">'stagger'</span>, &#123;</div><div class="line">  stagger: <span class="function"><span class="keyword">function</span> (<span class="params">index</span>) </span>&#123;</div><div class="line">    <span class="comment">// increase delay by 50ms for each transitioned item,</span></div><div class="line">    <span class="comment">// but limit max delay to 300ms</span></div><div class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.min(<span class="number">300</span>, index * <span class="number">50</span>)</div><div class="line">  &#125;</div><div class="line">&#125;)</div></pre></td></tr></table></figure>
<p>Example:</p>
<iframe width="100%" height="200" style="margin-left:10px" src="https://jsfiddle.net/yyx990803/mvo99bse/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

<p class="tip">The <code>stagger</code> attribute will not affect the transition of items added or removed by <code>v-if</code> or <code>v-show</code>. Only changes to the array or object provided to <code>v-for</code> will cause transitions to stagger.</p>

    
      <div class="guide-links">
        
          <span>← <a href="/guide/forms.html">Form Input Bindings</a></span>
        
        
          <span style="float:right"><a href="/guide/components.html">Components</a> →</span>
        
      </div>
    
    <div class="footer">
      Caught a mistake or want to contribute to the documentation?
      <a href="https://github.com/vuejs/vuejs.org/blob/master/src/guide/transitions.md" target="_blank">
        Edit this page on Github!
      </a>
    </div>
</div>

                
            </div>
            <script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        

        <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        </script>
    </body>
</html>
